{% extends "base-student.html" %}
{% block title %}学生借书{% endblock %}
{% block style_2 %}
<style>
    .layui-table-body.layui-table-main {
        overflow-x: hidden;
        width: 100%;
    }

    .layui-body {
        width: auto;
    }
    .layui-table-fixed {
        display: none;
    }
</style>
{% endblock %}
{% block card %}
<div class="layui-card-header"><h2>学生借书</h2></div>{% endblock %}
{% block body %}
<form class="layui-form" method="post" id="searchForm">
    {{ form.csrf_token }}
    <div class="layui-form-item">
        <div class="layui-inline">
            <label style="font-size: medium;width: 150px;" class="layui-form-label">学生借阅卡号码：</label>
            <div class="layui-input-inline">
                {{ form.card(class="layui-input", id="card", value=id, readonly="readonly") }}
            </div>
            <label style="font-size: medium;width: 80px;" class="layui-form-label">书名：</label>
            <div class="layui-input-inline">
                {{ form.book_name(class="layui-input", id="book_name") }}
            </div>
            <div class="layui-input-inline">{{ form.submit(class="layui-btn", id="search") }}</div>
        </div>
    </div>
</form>
<div id="remove">
    <table lay-even id="result" lay-filter="re">
        <thead>
        <tr>
            <th lay-data="{field:'barcode', width:160}">图书编号</th>
            <th lay-data="{field:'isbn', width:180}">ISBN</th>
            <th lay-data="{field:'book_name', width:240}">书名</th>
            <th lay-data="{field:'author', width:160}">作者</th>
            <th lay-data="{field:'start_date', width:200}">出版社</th>
            <th lay-data="{field:'end_date'}">操作</th>
        </tr>
        </thead>
        <tbody>
        {% for book in books %}
        {% for inventory in inventorys|selectattr('isbn', 'equalto', book.isbn) %}
        <tr>
            <td>{{ inventory.barcode }}</td>
            <td>{{ book.isbn }}</td>
            <td>{{ book.book_name }}</td>
            <td>{{ book.author }}</td>
            <td>{{ book.press }}</td>
            <td><a class="layui-btn layui-btn-sm" lay-event="borr">借出</a></td>
        </tr>
        {% endfor %}
        {% endfor %}


        </tbody>
    </table>

</div>
<table id="test" lay-filter="test"></table>

{% endblock %}

{% block script %}
<script>
    layui.use(['form', 'table', 'jquery'], function () {
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;

        table.init('re', {
            height: 390
            , limit: 7
            , page: true
        });
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            //var tr = obj.tr; //获得当前行 tr 的DOM对象
            console.log($('#card').val());
            if (layEvent === 'borr') {
                layer.confirm('确认借出吗？', function (index) {
                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    //向服务端发送删除指令
                    table.reload('test', {
                        url: "{{ url_for('out') }}",
                        where: {
                            'barcode': data.barcode,
                            'card': $('#card').val(),
                            'book_name': $('#book_name').val()
                        }
                    });
                    layer.close(index);
                });
            }
        });

        $(document).ready(function () {
            $("#li_4").addClass("layui-nav-itemed");
            $("#li_4_1").addClass("height-light");
            $('#search').on('click', function () {
                // 固定学生卡信息
                var form = new FormData(document.getElementById("searchForm"));

                console.log(form);
                $.ajax({
                    url: "{{ url_for('find_stu_book') }}",
                    type: "post",
                    data: form,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.length !== 0) {
                            if (data[0].stu === 0) {
                                layui.use('layer', function () {
                                    var layer = layui.layer;

                                    layer.msg('请输入正确卡号！', {time: 1000});
                                });
                            } else if (data[0].stu === 1) {
                                layui.use('layer', function () {
                                    var layer = layui.layer;

                                    layer.msg('该借阅卡已欠费！', {time: 1000});
                                });
                            } else if (data[0].stu === 2) {
                                layui.use('layer', function () {
                                    var layer = layui.layer;

                                    layer.msg('该借阅卡已到期！', {time: 1000});
                                });
                            } else if (data[0].stu === 3) {
                                layui.use('layer', function () {
                                    var layer = layui.layer;
                                    layer.msg('该借阅卡已挂失！', {time: 1000});
                                });
                            } else {
                                $('#remove').remove();
                                table.render({
                                    elem: '#test'
                                    , data: data
                                    , cols: [[
                                        {field: 'barcode', title: '图书编号', width: 110}
                                        , {field: 'isbn', title: 'ISBN', width: 140}
                                        , {field: 'book_name', title: '书名', width: 200}
                                        , {field: 'author', title: '作者', width: 120}
                                        , {field: 'press', title: '出版社', width: 150}
                                        , {title: '操作', align: 'center', toolbar: '#barDemo', width: 300}
                                    ]]
                                    , page: true
                                    , height: "auto"
                                    , limit: 7
                                    , response: {
                                        statusCode: 200
                                    }
                                    , parseData: function (data) {
                                        return {
                                            "code": 200,
                                            "msg": data.message,
                                            "count": data.length,
                                            "data": data
                                        };
                                    }
                                });
                                addImage();
                            }
                        } else {
                            layui.use('layer', function () {
                                var layer = layui.layer;
                                layer.msg('找不到该图书！', {time: 1000});
                            });
                        }
                        addImage();
                    }
                });
                layui.use(['form', 'table', 'jquery'], function () {
                    var form = layui.form;
                    var table = layui.table;
                    var $ = layui.$;

                    table.init('re', {
                        height: "auto"
                        , limit: 7
                        , page: true
                    });
                    table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                        var data = obj.data; //获得当前行数据
                        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                        //var tr = obj.tr; //获得当前行 tr 的DOM对象
                        console.log(obj);
                        if (layEvent === 'borr') {
                            console.log($('#card').val());
                            layer.confirm('确认借出吗？', function (index) {
                                //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                //向服务端发送删除指令
                                table.reload('test', {
                                    url: "{{ url_for('out') }}",
                                    where: {
                                        'barcode': data.barcode,
                                        'card': $('#card').val(),
                                        'book_name': $('#book_name').val()
                                    },
                                });
                                layer.close(index);
                            });
                        }
                    });
                });
                return false;
            });
            document.getElementById("search").click();
            document.addEventListener('click', function () {
                addImage();
            });
            addImage();
            setInterval(addImage,500);
        });
    });

    function addImage() {
        $('td[data-field="isbn"]').each(function () {
            // 获取一次父节点
            let tr = this.parentElement;
            // 获取子节点
            let child = this.firstChild;
            // 获取前节点的子节点
            let prev_node_child = this.previousElementSibling.firstChild;
            if (document.getElementById(prev_node_child.textContent) !== null && document.getElementById(prev_node_child.textContent) !== undefined) {
                addImage2();
                return;
            }

            let img_td = document.createElement("td");
            let img = document.createElement("img");
            img_td.appendChild(img);
            img.src = "../../static/book_cover/" + child.textContent + ".jpg";
            img.style.width = "150px";
            img.style.height = "150px";
            img.style.maxWidth = "150px";
            img.id = prev_node_child.textContent;
            // 插入图片节点
            tr.insertBefore(img_td, tr.firstChild);
        });
    }

    function addImage2() {
        $('th[data-field="isbn"]').each(function () {
            if (document.getElementById("new_span_in_th") !== null && document.getElementById("new_span_in_th") !== undefined) {
                return;
            }
            // 获取一次父节点
            let tr = this.parentElement;

            let th = document.createElement("th");
            let div = document.createElement("div");
            let span = document.createElement("span");
            span.textContent = " ";
            span.id = "new_span_in_th";
            div.classList.add("layui-table-cell");
            div.style.width = "150px";
            div.appendChild(span);
            th.appendChild(div);
            tr.insertBefore(th, tr.firstChild);
        });
    }
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="borr">借出</a>
</script>
{% endblock %}

